<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='https://kang-is.googlecode.com/svn/trunk/css/font-awesome.min.css' rel='stylesheet'/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SIMPLE HTML EDITOR ONLINE</title>
<style type="text/css">
.fa-gears:before, .fa-cogs:before {
content: "\f121";
}

a{text-decoration: none; transition: all 0.4s ease-in;color:#E74C3C;}
a:hover{color:#AB2719;}
.fa {
text-shadow: 2px 2px 0px #000;
color: #ECECEC;
font-size: 38px;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
        font-size:13px;
        font-family:Arial;
	background-color:#252527
}

#header {	
margin-top: 50px;
margin-bottom:50px; }

h1 {
        transition: all 0.4s ease-in;
	font-family: sans-serif;
	color:#ECECEC;
	text-shadow: 2px 2px 0px #000;
}

h1:hover{color:#E74C3C;cursor:pointer;}

h2 {
        color: #ECECEC;
}

#hasil {
        padding: 10px;
        color:#fff;
        border:1px solid #BEBEBE;
	background-color:#2C2C2C;
	width:97.5%;
	height:100%
}

#footer {
        font-family: sans-serif;
        color:#fff;
        font-size:13px;
        text-align: right;
        margin-right:10px
}

textarea {
font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
color:#BEBEBE;
transition: all 0.4s ease-in;
background: #2C2C2C;
}
textarea:hover {color:#000;background: #F3F3F3; border:1px solid #000}

textarea:focus {color:#000;background: #F3F3F3; border:1px solid #000}

input[type="submit"] {
	transition: all 0.4s ease-in;
	cursor: pointer;
	background-color:#E74C3C;
	color:#fff;
	border:1px solid #E74C3C;
	padding:5px 40px
}

input[type="submit"]:hover {
	background-color:#C0392B;
	border:1px solid #C0392B
}


<!--
#Layer1 {
	  position:fixed;
	  width:17px;
	  height:10px;
	  z-index:1;
	  overflow:auto;
	  left: 18px;
	  top: 209px;
	  
}
  -->
  </style>

  </head>

<body>

  <script language="javascript">

function pasang(){

document.getElementById('hasil').innerHTML=document.getElementById('tulis').value;

}

</script>
<h1 id="header" align="center"><i class="fa fa-cogs"></i> SIMPLE HTML EDITOR</h1>
<p align="center">

  <textarea class="text_area"  name="tulis" style="width:99%; height:150px;  rows="5" id="tulis">tuliskan kode disini!</textarea>

  </p>

  <p>

  <input type="submit" name="Submit" value="Submit" onclick="pasang()" />

  </p>

 <div id="hasil"><h2><center>Preview Hasil Kodingan </center></h2></div>
<p>
<div id="footer">By <a href="http:/data.com"> Diki Satrio Budi</a></div>
</p>
  </body>

  </html>